/**
 * 封装组件？
 * 组件核心：html+css+js
 * 技巧：从三个部分抽离需要复用的部分
 * @returns
 */
import { getChannelAction } from '@/store/modules/article'
import { Select } from 'antd'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
const { Option } = Select
/**
 *
 * @param {*} param0
 * @returns
 */
function Channel({ value, onChange, width = 400 }) {
  const dispatch = useDispatch()
  // 组件挂在执行一次
  useEffect(() => {
    // 1. 存储频道数据到redux
    dispatch(getChannelAction())
  }, [dispatch])
  // 2. 获取频道数据
  const { channelList } = useSelector((state) => state.article)
  return (
    <Select
      style={{ width }}
      value={value}
      onChange={onChange}
      placeholder="请选择文章频道"
    >
      {channelList.map((item) => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  )
}

export default Channel
